<template>
  <!--center-block居中-->
  <div class="row container center-block">
    <header class="col-sm-12 col-md-12 col-lg-12 col-xl-12">
      <div id="carousel" class="carousel slide col-sm-8 col-md-8 col-lg-8 col-xl-8">
        <!-- 轮播（Carousel）指标 -->
        <ol class="carousel-indicators">
          <li data-target="#carousel" data-slide-to="0" class="active"></li>
          <li data-target="#carousel" data-slide-to="1"></li>
          <li data-target="#carousel" data-slide-to="2"></li>
        </ol>
        <!-- 轮播（Carousel）项目 -->
        <div class="carousel-inner">
          <div class="item active">
            <img src="./../../../assets/slide/slide1.jpg" alt="First slide" width="100%">
          </div>
          <div class="item">
            <img src="./../../../assets/slide/slide2.jpg" alt="Second slide" width="100%">
          </div>
          <div class="item">
            <img src="./../../../assets/slide/slide3.jpg" alt="Third slide" width="100%">
          </div>
        </div>
        <!-- 轮播（Carousel）导航 -->
        <a class="left carousel-control" href="#carousel" role="button" data-slide="prev">
          <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
          <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#carousel" role="button" data-slide="next">
          <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </a>
      </div>
      <!--用户信息-->
      <div class="user-info col-lg-4 col-xl-4">
        <div>
          <img class="user-info-avatar" src="../../../assets/img/avatar.jpeg" width="20%"/>
          <span>mazaiting</span>
        </div>
        <div>
          <span>职业：</span>
          <span>Android 工程师</span>
        </div>
        <div>
          <span>年龄：</span>
          <span>24</span>
        </div>
        <div>
          <span>学历：</span>
          <span>本科</span>
        </div>
        <div>
          <span>英语水平：</span>
          <span>四级</span>
        </div>
        <div>
          <span>专业证书：</span>
          <span>计算机二级</span>
        </div>
        <div>
          <span>研究方向：</span>
          <span>移动端、Web端、前端</span>
        </div>
      </div>
    </header>

    <div class="clearfix">
      <article-category />
      <div style="clear: both; height: 10px;"></div>
    </div>
  </div>
</template>

<script>
  // 文章分类模块
  import ArticleCategory from "../../widget/article-category";
  export default {
    name: "home-index",
    components: {ArticleCategory},
    created: function () {
      // console.log("---" + document.body.clientWidth);
      // console.log("---" + document.body.clientHeight)
    }
  }
</script>

<style scoped>
  .container {
    /*margin: 5% 5% 0;*/
    background: white;
    border-radius: 20px;
    box-shadow: 2px 2px 1px #888888;
  }

  .content-full {
    height: 100%;
  }

  /*轮播图*/
  .container > header {
    margin-top: 1%;
    margin-bottom: 1%;
  }

  /*#carousel {*/
    /*width: 60%;*/
    /*margin-left: 5%;*/
    /*float: left;*/
  /*}*/

  /*用户信息*/
  .user-info {
    background: #DDD4;
    border-radius: 10px;
    width: 25%;
    float: right;
    margin-right: 3%;
    margin-top: 3%;
    line-height: 30px;
  }

  .user-info > div {
    margin-left: 10px;
    margin-top: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .user-info > div > img {
    margin: 5px;
    border-radius: 10px;
  }

  .user-info > div > span {
    font-family: 楷体,monospace;
    font-size: 18px;
  }

</style>
